<template>
  <div class="page">
    <el-input v-model="qrcodeOpts.text" @change="onQrcodeChange"></el-input>

    <el-image
      class="mt-sm br"
      v-if="qrcodeOpts.url"
      :src="qrcodeOpts.url"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="[qrcodeOpts.url]"
      show-progress
      :initial-index="4"
      fit="cover"
    ></el-image>
  </div>
</template>

<script lang="ts" setup>
import * as QRCode from 'qrcode'

const qrcodeOpts = reactive({
  text: 'hello world!',
  url: ''
})

const onQrcodeChange = () => {
  QRCode.toDataURL(qrcodeOpts.text)
    .then(url => {
      qrcodeOpts.url = url
    })
    .catch(er => {
      console.log(er)
    })
}

onMounted(() => {
  onQrcodeChange()
})
</script>

<style lang="scss">
//
</style>
